<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <Proportion :source="proportionData" />
    <Progress
      v-for="(v, i) in progressData"
      :key="i"
      :name="v.name"
      :value="v.value"
      :unit="v.unit"
      :max="v.max"
      color="linear-gradient(90deg, #08B1FF 0%, #6BFFF3 99%)"
      :round="true"
      :area="true"
      background="#1b345d"
    />
    <Progress
      v-for="(v, i) in progressData"
      :key="i"
      :icon="require('@/assets/threeMechanism/公共-红旗.png')"
      :iconSize="['26px', '26px']"
      :name="v.name"
      height="20px"
      :value="v.value"
      :unit="v.unit"
      :max="v.max"
      color="linear-gradient(90deg, #02A7F0, #E2E9F9)"
      :round="false"
      border="1px solid #0EFCFF"
      :area="true"
    />
    <div class="flex">
      <Bar
        eleId="bar5"
        :background="false"
        :source="bar5"
        :color="['#00A1FF', '#5CE0E2']"
        :round="false"
        :area="true"
        :legend="true"
      ></Bar>
      <Bar
        eleId="bar2"
        :background="false"
        :source="bar2"
        :color="['#00A1FF', '#5CE0E2']"
        :round="false"
        :area="true"
      ></Bar>

      <!-- 饼图 -->
      <Pie eleId="pie2" :source="pie2"></Pie>
    </div>

    <div class="flex">
      <Pie
        eleId="pie3"
        :source="pie3"
        :radius="['40%', '70%']"
        roseType=""
        :legend="true"
      ></Pie>
      <!-- 圆角柱状图 -->
      <bar-stack
        eleId="bar4"
        :source="bar4"
        :stack="false"
        :barBorderRadius="[15, 15, 15, 15]"
        :color="[bar4Color]"
      ></bar-stack>
      <bar-stack eleId="bar3" :source="bar3" :stack="true"></bar-stack>
    </div>
    <div class="flex"></div>
    <div class="flex"></div>
    <!-- 环形图 -->
  </div>
</template>

<script>
import Proportion from "@/components/charts/Proportion.vue";
import Progress from "@/components/charts/Progress.vue";
import Bar from "@/components/charts/Bar.vue";
import BarStack from "@/components/charts/BarStack.vue";
import Pie from "@/components/charts/Pie.vue";
export default {
  name: "Home",
  components: {
    Proportion,
    Progress,
    Bar,
    BarStack,
    Pie,
  },
  data() {
    return {
      proportionData: [
        { name: "六石镇", value: "740", unit: "" },
        { name: "画水镇", value: "740", unit: "" },
        { name: "六石镇", value: "740", unit: "" },
        { name: "画水镇", value: "740", unit: "" },
      ],
      progressData: [
        { name: "招商引资", value: "300", unit: "亿元", max: "350" },
        {
          name: "政府及国企投资重大项目",
          value: "175",
          unit: "亿元",
          max: "220",
        },
      ],
      bar2: {
        name: ["20以下", "21-30", "31-40", "41-50", "51-60", "60以上"],
        series: [
          { data: [32, 58, 64, 64, 64, 25], type: "line", name: "男" },
          { data: [23, 42, 51, 25, 32, 38], type: "line", name: "女" },
        ],
      },
      bar5: {
        name: ["20以下", "21-30", "31-40", "41-50", "51-60", "60以上"],
        series: [
          { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "男" },
          { data: [23, 42, 51, 25, 32, 38], type: "line", name: "女" },
        ],
      },
      bar3: {
        name: ["20以下", "21-30", "31-40"],
        series: [
          {
            data: [32, 58, 64],
          },
          {
            data: [32, 58, 64],
          },
          {
            data: [32, 58, 64],
          },
        ],
      },
      bar4: {
        name: ["20以下", "21-30", "31-40"],
        series: [
          {
            data: [32, 58, 64],
          },
        ],
      },
      bar4Color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#F5FFFF ", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#00CCFF ", // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
      pie2: [
        { value: 24, name: "搭建专班1" },
        { value: 32, name: "搭建专班2" },
        { value: 29, name: "搭建专班3" },
        { value: 48, name: "搭建专班4" },
      ],
      pie3: [
        { value: 24, name: "未完成" },
        { value: 32, name: "已完成" },
      ],
    };
  },
  methods: {
    test(str) {
      let obj = {};
      for (let i = 0, len = str.length - 1; i < len; i++) {
        if (str.charCodeAt(i) === 33) {
          obj.a = true;
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.home {
  background: #aaaaaa;
}
</style>
